<template>
  <div class="bodyeva" ref="eva">
    <div>
      <header class="head-eva">
        <div class="most-eva">
          <h1>3.9</h1>
          <p>综合评分</p>
          <div>高于周边商家69.2%</div>
        </div>
        <div class="next-eva">
          <div>
            <span>服务态度</span>
            <el-rate
              v-model="value5"
              disabled
              show-score
              text-color="#ff9900"
              score-template="{value}">
            </el-rate>
          </div>
          <div>
            <span>服务态度</span>
            <el-rate
              v-model="value4"
              disabled
              show-score
              text-color="#ff9900"
              score-template="{value}">
            </el-rate>
          </div>
          <div>
            <span>送达时间</span>44分钟
          </div>
        </div>
      </header>
      <div
        style="background:rgba(7,17,27,0.1);height: 0.36rem; border-bottom: 0.01rem solid rgba(7,17,27,0.3);border-top: 0.01rem solid rgba(7,17,27,0.3);"></div>
      <section class="evatit">
        <div @click="quanbu()">全部<span>{{len}}</span></div>
        <div @click="manyi()">满意<span>{{my}}</span></div>
        <div @click="bumanyi()">不满意<span>{{bmy}}</span></div>
      </section>
      <section class="onlylook">
        <svg style="width: 0.64rem;height: 0.64rem;">
          <image xlink:href="../../../static/img/check_circle.svg" style="width: 0.64rem;height: 0.64rem"></image>
        </svg>
        只看有内容的评价
      </section>
      <section class="evanr">
        <ul>
          <li v-for="(item,index) in pingjia" :key="index" v-show="boo[index]">
            <div class="time">2016-07-13 20:33</div>
            <img class="img" :src="item.avatar" alt="">
            <h3>{{item.username}}</h3>
            <div class="xinxin">
              <el-rate
                v-model="value[index]"
                disabled
                text-color="#ff9900"
                score-template="{value}">
              </el-rate>
              {{item.deliveryTime}}分钟送达
            </div>
            <p>{{item.text}}</p>
          </li>
        </ul>
      </section>
    </div>
  </div>
</template>

<script>
import Better from 'better-scroll'
export default {
  name: 'eva',
  data () {
    return {
      value5: 0,
      value4: 0,
      value: [],
      boo: [],
      len: 0
    }
  },
  created () {
    setTimeout(() => {
      this.value5 = this.$store.state.count.seller.serviceScore
      this.value4 = this.$store.state.count.seller.foodScore
      let va = []
      this.pingjia.forEach((it) => {
        va.push(it.score)
      })
      this.value = va
      this.len = this.pingjia.length
      this.quanbu()
      this.eva = new Better(this.$refs.eva, {
        click: true
      })
    }, 100)
  },
  computed: {
    pingjia () {
      return this.$store.state.count.ratings
    },
    my () {
      let j = 0
      for (let i = 0; i < this.len; i++) {
        if (this.pingjia[i].rateType === 0) {
          // console.log(1)
          j++
        }
      }
      return j
    },
    bmy () {
      let j = 0
      for (let i = 0; i < this.len; i++) {
        if (this.pingjia[i].rateType === 1) {
          j++
        }
      }
      return j
    }
  },
  methods: {
    quanbu () {
      this.boo = []
      this.pingjia.forEach(() => {
        this.boo.push(1)
      })
      // console.log(this.boo)
    },
    manyi () {
      this.boo = []
      for (let i = 0; i < this.pingjia.length; i++) {
        if (this.pingjia[i].rateType === 0) {
          this.boo.push(1)
        } else {
          this.boo.push(0)
        }
      }
    },
    bumanyi () {
      this.boo = []
      for (let i = 0; i < this.pingjia.length; i++) {
        if (this.pingjia[i].rateType === 0) {
          this.boo.push(0)
        } else {
          this.boo.push(1)
        }
      }
    }
  }
}
</script>

<style scoped lang="less">
  .bodyeva{
    position: fixed;
    top: 0;
    bottom: 0;
    box-sizing: border-box;
    margin-top:3.48rem;
    margin-bottom: 1rem;
    overflow: hidden;
  }
  .head-eva {
    display: flex;
    padding: 0.36rem 0;
    border-bottom: 0.01rem solid rgba(7, 17, 27, 0.3);
    height: 1rem;
    .most-eva {
      float: left;
      width: 2.75rem;
      text-align: center;
      padding: 0.05rem 0;
      border-right: 0.01rem solid rgba(7, 17, 27, 0.3);
      h1 {
        font-size: 0.48rem;
        color: rgb(255, 153, 0);
        line-height: 0.56rem;
      }
      p {
        font-size: 0.24rem;
        color: black;
        line-height: 0.4rem;
        font-weight: 700;
      }
      div {
        font-size: 0.20rem;
        color: rgb(7, 17, 27);
        line-height: 0.20rem;
      }
    }
    .next-eva {
      font-size: 0.24rem;
      color: rgb(7, 17, 27);
      width: 4.73rem;
      display: inline-block;
      & > div {
        margin-left: 0.48rem;
        position: relative;
        height: 0.4rem;
        span {
          line-height: 0.4rem;
          margin-right: 0.24rem;
        }
        .el-rate {
          position: absolute;
          margin-top: 0;
          display: inline-block;
        }
      }
    }
  }

  .evatit {
    margin-left: 0.36rem;
    margin-right: 0.36rem;
    padding-top: 0.36rem;
    padding-bottom: 0.36rem;
    box-sizing: border-box;
    height: 1.44rem;
    border-bottom: 0.01rem solid rgba(7, 17, 27, 0.4);
    & > div {
      height: 100%;
      float: left;
      padding: 0rem 0.30rem;
      background: aqua;
      font-size: 0.25rem;
      text-align: center;
      line-height: 0.8rem;
      color: black;
      margin-right: 0.15rem;
      border-radius: 0.04rem;
      span {
        font-size: 0.15rem;
        margin-left: 0.04rem;
      }
    }
    &>div:nth-child(1){
      background: rgb(0,160,220);
      color: rgb(255,255,255);
    }
    &>div:nth-child(2){
      background: rgba(0,160,220,0.2);
    }
    &>div:nth-child(3){
      background: rgba(77,85,93,0.2);
    }
  }

  .onlylook {
    height: 1rem;
    padding: 0.20rem 0.40rem;
    box-sizing: border-box;
    font-size: 0.36rem;
    border-bottom: 0.01rem solid rgba(7, 17, 27, 0.4);
    svg {
      display: inline-block;
      vertical-align: middle;
    }
  }

  .evanr {
    padding-bottom: 1rem;
    li {
      padding: 0.36rem;
      padding-left: 1.16rem;
      box-sizing: border-box;
      position: relative;
      &:after{
        content: "";
        display: inline-block;
        width: 100%;
        height: 0.01rem;
        background: #7e8c8d;
      }
      .img {
        position: absolute;
        left: 0.36rem;
        top: 0.36rem;
        height: 0.56rem;
        width: 0.56rem;
        border-radius: 50%;
      }
      h3 {
        font-size: 0.2rem;
        color: rgb(7, 17, 27);
        line-height: 0.24rem;
      }
      .xinxin {
        height: 0.4rem;
        font-size: 0.2rem;
        font-weight: 200;
        color: rgb(147, 153, 159);
        line-height: 0.4rem;
        .el-rate {
          height: 0.4rem;
          line-height: 0;
          display: inline-block;
        }
      }
      p {
        /*width: 100%;*/
        /*display: block;*/
        word-break: break-all;
        word-wrap: break-word;
        font-size: 0.24rem;
        color: rgb(7, 17, 27) ;
        line-height: 0.36rem;
      }
      .time{
        position: absolute;
        right: 0.36rem;
        top: 0.36rem;
        font-size: 0.2rem;
        font-weight: 200;
        color: rgb(147,153,159);
      }
    }
  }
</style>
